<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
		<title>常见用法</title>
		<style type="text/css">
			.red{
				color:red;
			}
		</style>
		<script type="text/javascript">
			function getInputValue(){
				alert($("#_input").val());
			}
			function setInputValue(){
				$("#_input").val('hello');
			}
			
			function getTextValue(){
				alert($("#_span").text());
			}
			function setTextValue(){
				$("#_span").text('新设置的文本');
			}
			
			function getTextByElementName(){
				alert($('ul li').text());
			}
			
			function getTextByClassName(){
				alert($('.myclass').text());
			}
			
			function getSizeAttribute(){
				alert($("#_input2").attr('size'));
			}
			function setSizeAttribute(){
				$("#_input2").attr('size', 100);
			}
			
			function setClass(){
				$("#_span2").addClass('red');
			}
			function deleteClass(){
				$("#_span2").removeClass('red');
			}
			
			function convertObject(){
				var e = document.getElementById('_input3');
				alert($(e).val());
			}
			
			function getAllInputValues(){
				$("#list").empty();
				$('body').find('input').each(function(){
					$("#list").append('<li>' + $(this).val() + '</li>')
				});
			}
		</script>
	</head>
	<body>
		<h1>常见用法</h1>
		<input id="_input" type="text" value="你好"/>
		<input type="button" value="获得input内容" onclick="getInputValue()"/>
		<input type="button" value="设置input内容" onclick="setInputValue()"/>
		<br><br>
		
		<span id="_span">文本内容</span>
		<input type="button" value="获得文本内容" onclick="getTextValue()()"/>
		<input type="button" value="设置文本内容" onclick="setTextValue()()"/>
		<br><br>
		
		<ul>
			<li>Java</li>
		</ul>
		<input type="button" value="通过元素名称获得内容" onclick="getTextByElementName()"/>
		<br><br>
		
		<div class="myclass">我的文本</div>
		<input type="button" value="通过class名称获得内容" onclick="getTextByClassName()"/>
		<br /><br />
		
		<input id="_input2" type="text" size="10"/>
		<input type="button" value="获得属性值" onclick="getSizeAttribute()"/>
		<input type="button" value="设置属性值" onclick="setSizeAttribute()"/>
		<br /><br />
		
		<span id="_span2">字体颜色</span>
		<input type="button" value="设置class" onclick="setClass()"/>
		<input type="button" value="删除class" onclick="deleteClass()"/>
		<br /><br />
		
		<input id="_input3" type="button" value="将js dom对象转化为JQuery对象" onclick="convertObject()"/>
		<br /><br />
		
		<input type="button" value="获得所有input值" onclick="getAllInputValues()"/>
		<ul id="list">
		</ul>
		<br /><br />
	</body>
</html>
